<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Popular modern and powerful data visualization library.">
<meta name="keywords" content="html,svg,vml,javascript,charts,data visualization,animation">
<title>Data visualization library - Charts</title>

<!--script src="../dom/__ns__.js"></script>
<script src="../dom/Template.js"></script>
<script src="../formatters/__ns__.js"></script>
<script src="../formatters/NumberFormatter.js"></script>
<script src="../animation/__ns__.js"></script>
<script src="../graphics/__ns__.js"></script>
<script src="../graphics/VmlHelper.js"></script>
<script src="../net/__ns__.js"></script>
<script src="../net/HttpRequest.js"></script>
<script src="../util/__ns__.js"></script>
<script src="../util/Object.js"></script>

<script src="__ns__.js"></script>
<script src="Tooltip.js"></script>
<script src="Grid.js"></script>
<script src="BaseChart.js"></script>
<script src="LineChart.js"></script>
<script src="PieChart.js"></script>
<script src="BarChart.js"></script>
<script src="ColumnChart.js"></script>
<script src="BubbleChart.js"></script>
<script src="DonutChart.js"></script>
<script src="HoopChart.js"></script>
<script src="GeoLocations.js"></script>
<script src="GeoChart.js"></script>
<script src="FunnelChart.js"></script>
<script src="TagChart.js"></script-->
  
<script src="../../bin/jscb.js"></script>

<script>
window.onload = function() {
  var data = [
      ['Work', 'Eat', 'Commute', 'Watch TV', 'Sleep'],
      [100, 50, 30, 10, 40],
      [140, 2, 110, 150, 1300]
  ];
  charts.PieChart && (new charts.PieChart('pie-chart-container')).draw(data);
  charts.DonutChart && (new charts.DonutChart('donut-chart-container')).draw(data);
  charts.HoopChart && (new charts.HoopChart('hoop-chart-container')).draw(data);
  
  data = [
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2004',  1000,      400,     200],
      ['2005',  1170,      460,     300],
      ['2006',  660,       1120,    0],
      ['2007',  1030,      540,     500]
  ];
  charts.LineChart && (new charts.LineChart('line-chart-container')).draw(data, {'scale': false, 'smooth': true});
  charts.BarChart && (new charts.BarChart('bar-chart-container')).draw(data);
  charts.ColumnChart && (new charts.ColumnChart('column-chart-container')).draw(data);
  charts.ColumnChart && (new charts.ColumnChart('flip-column-chart-container')).draw(data, {'flip': 1});
  charts.BarChart && (new charts.BarChart('flip-bar-chart-container')).draw(data, {'flip': 1});

  data = [
      ['ID',   'X', 'Y', 'Temperature'],
      ['USA',   60,  60,           120],
      ['CAN',   25,  25,            50],   
      ['RUS',   70,  70,            80],   
      ['GBR',   85,  99,            40]
  ];
  charts.BubbleChart && (new charts.BubbleChart('bubble-chart-container')).draw(data);
  charts.FunnelChart && (new charts.FunnelChart('funnel-chart-container')).draw(data);

  data = [
    ['Country', 'Population'],
    ['Germany', 200],
    ['USA',     300],
    ['Brazil',  400],
    ['Canada',  500],
    ['France',  600],
    ['Russia',  700]
  ];
  //charts.TagChart && (new charts.TagChart('tag-chart-container')).draw(data);
  charts.GeoChart && (new charts.GeoChart('geo-chart-container')).draw(data);
};

</script>
<style>
  .chart-container {float:left; height:225px; margin: 50px; width:225px; font-size: 20px}
  .chart-wrapper {border:solid 1px #ccc; float:left; margin:5px; padding: 5px;}
</style>
</head>
<body>
  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.PieChart.html#constructor">Pie Chart</a>
    </div>
    <div id="pie-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.DonutChart.html#constructor">Donut Chart</a>
    </div>
    <div id="donut-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.HoopChart.html#constructor">Hoop Chart</a>
    </div>
    <div id="hoop-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.LineChart.html#constructor">Line Chart</a>
    </div>
    <div id="line-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.BubbleChart.html#constructor">Bubble Chart</a>
    </div>
    <div id="bubble-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.FunnelChart.html#constructor">Funnel Chart</a>
    </div>
    <div id="funnel-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.BarChart.html#constructor">Bar Chart</a>
    </div>
    <div id="bar-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.ColumnChart.html#constructor">Column Chart</a>
    </div>
    <div id="column-chart-container" class="chart-container"></div>
  </div>

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.ColumnChart.html#constructor">Flipped Column Chart</a>
    </div>
    <div id="flip-column-chart-container" class="chart-container"></div>
  </div>
  
  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.BarChart.html#constructor">Flipped Bar Chart</a>
    </div>
    <div id="flip-bar-chart-container" class="chart-container"></div>
  </div>

  <!--div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.TagChart.html#constructor">Tag Chart</a>
    </div>
    <div id="tag-chart-container" class="chart-container"></div>
  </div-->

  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.GeoChart.html#constructor">Geo Chart</a>
    </div>
    <div id="geo-chart-container" class="chart-container"
         style="width:919px;height:599px"
         st4yle="width:572px;height:373px"></div>
  </div>

  <script>
  var _gaq = _gaq || [];
  
  _gaq.push(
            ['projectTracker._setAccount', 'UA-5065160-9'],
            ['projectTracker._trackPageview']);
  
  (function() {
   if (document.location.protocol != 'file:') {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
   }
  })();
  </script>
</body>
</html>